<template>
  <el-dialog v-model="dialogVisible" title="预览" width="60%">
    <!-- 预览内容区域 -->
    <div class="preview-content">
      <slot name="content"></slot>
    </div>

    <!-- 操作按钮 -->
    <template #footer>
      <el-button type="primary" @click="handleClose">关闭预览</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 控制对话框的显示与隐藏
const dialogVisible = ref(false);

// 定义可以触发的事件
const emit = defineEmits(['close']);

// 提供一个方法用于打开对话框
const openDialog = () => {
  dialogVisible.value = true;
};

// 处理关闭对话框
const handleClose = () => {
  dialogVisible.value = false;
  emit('close');
};

defineExpose({
  openDialog
});
</script>

<style scoped>
.preview-content {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 适配暗色模式 */
@media (prefers-color-scheme: dark) {
  .preview-content {
    background-color: #2d2d2d;
    color: #e8e8e8;
  }
}

/* 响应式调整 */
@media (max-width: 992px) {
  .el-dialog {
    width: 80% !important;
  }
}

@media (max-width: 768px) {
  .el-dialog {
    width: 95% !important;
  }
}
</style>